<template>
    <div >
        <div class="goodsInfo">
            <span>{{detailGoods.desc}}</span>
        </div>
        <div class="goodsType">
            <span>{{detailGoods.key}}</span>
        </div>
        <img class="goodsImg"
         v-lazy = "item"  
        v-for="(item,key) in detailGoods.imgList" 
        :key="key"
        @load="loadImg" >
    </div>
</template>

<script>
    export default {
        props:{
            detailGoods:{
                type:Object,
                defaul(){
                    return {}
                }
            }
        },
        methods:{
            loadImg(){
                this.$emit('ImageLoaded')
            }
        }
    }
</script>

<style scoped>
    .goodsInfo{
        width: 100vw;
        margin:10px 0;
        padding: 0 8px;
        font-size: .84rem;
        line-height: 1.35rem;
    }
    
    .goodsInfo::before,.goodsInfo::after{
        content: "·";
        display: block;
        font-size: 2rem;
        margin:10px 0; 
        color: #aaa;
        font-weight: bolder;
        width: 78%;
    }
    .goodsInfo::before{
        border-bottom: 1px solid #aaa;
    }
    .goodsInfo::after{
        border-top: 1px solid #aaa;
        text-align: right;
        float: right;
        overflow: hidden;
    }
    .goodsImg{
        width: 100vw;
    }
    .goodsType{
        padding-left: 8px;
        font-size: .81rem;
    }
</style>